<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>
<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <script type="text/javascript">
    (function () {
      setTimeout(()=>{
        var dpr, rem, scale, temp, clientWidth, pxSafeRegionWidth;
        var docEl = document.documentElement;
        var fontEl_Deduplicate = document.createElement('style');
        var metaEl = document.querySelector('meta[name="viewport"]');

        // window.devicesPixelRadio = 物理像素 / dips(device-independent pixels)设备独立像素 ppi(Pixel Per Inch)
        dpr = window.devicePixelRatio || 1;

        //dpr兼容处理
        var arr = [2, 2.5, 2.75, 3, 3.5, 3.375, 4];
        for (var i = 0; i < arr.length; i++) {
          if (dpr == arr[i]) {
            temp = arr[i];
            break;
          }
        }
        dpr = temp || 1;
        scale = 1 / dpr;
        clientWidth = docEl.clientWidth;
        //适配平板平行视界
        if (clientWidth != 0) {
          var screenWidth = window.screen.availWidth;
          var maxDeltaWidth = 300;//最大宽度偏差值
          var deltaWidth = screenWidth - clientWidth;
          var isHoriView = false;
          //如果可见区域宽度与屏幕宽度差值大于最大宽度偏差值，则视为平行视界模式
          if (deltaWidth > maxDeltaWidth) {
            isHoriView = true;
            window.isHoriView = isHoriView;
          }
        }
        // 设置viewport，进行缩放，达到高清效果
        metaEl.setAttribute('content', 'width=' + dpr * clientWidth + ',initial-scale=' + scale +
          ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no');
        if (dpr > 1) {
          /width=([^,]+).*/.exec(metaEl.content);
          var width = RegExp["\x241"];
          if (width == "device-width") {
            dpr = 1;
            metaEl.setAttribute('content', 'width=' + clientWidth + ',initial-scale=' + 1 +
              ',maximum-scale=' + 1 + ',minimum-scale=' + 1 + ',user-scalable=no');
          } else {
            if (parseInt(width) != (document.getElementsByTagName('html')[0])
              .offsetWidth) {
              dpr = 1;
              metaEl.setAttribute('content', 'width=' + clientWidth + ',initial-scale=' + 1 +
                ',maximum-scale=' + 1 + ',minimum-scale=' + 1 + ',user-scalable=no');
            }
          }
          if (clientWidth != screen.width) {
            dpr = 1;
            metaEl.setAttribute('content', 'width=' + clientWidth + ',initial-scale=' + 1 +
              ',maximum-scale=' + 1 + ',minimum-scale=' + 1 + ',user-scalable=no');
          }
        }

        // 设置1rem所对应的大小
        rem = docEl.offsetWidth/ 36;
        // if (window.isHoriView) {
        //   rem = docEl.offsetWidth / 48;
        // } else if (window.JsInteraction && window.JsInteraction.isBigCD && window.JsInteraction.isBigCD()) {
        //   rem = docEl.offsetWidth / 72;
        // }
        // if (window.JsInteraction && window.JsInteraction.getSafeRegionWidth && window.JsInteraction.getSafeRegionWidth() &&
        //   window.devicePixelRatio) { //ring手机设置
        //   pxSafeRegionWidth = JSON.parse(window.JsInteraction.getSafeRegionWidth())
        //     .paddingStart;
        //   pxSafeRegionWidth = Number(pxSafeRegionWidth) / window.devicePixelRatio;
        // }

        // // 设置data-dpr属性，留作的css hack之用
        // docEl.setAttribute('data-dpr', dpr);

        // 动态写入样式
        fontEl_Deduplicate.innerHTML = 'html{font-size:' + rem+ 'px!important;}';
        docEl.firstElementChild.appendChild(fontEl_Deduplicate);

        // 给js调用的，某一dpr下rem和px之间的转换函数
        window.rem2px = function (value) {
          value = parseFloat(value);
          return value * rem;
        };
        window.px2rem = function (value) {
          value = parseFloat(value);
          return value / rem;
        };
        window.dpr = dpr;
        window.rem = rem;
      },10)
    }())
  </script>
</body>

</html>